<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript" src="../../js/qs.js"></script>

<style>
* {
	margin: 0;
	padding: 0;
}

.app {
	width: 750px;
	height: auto;
	font-size: 12px;
}

.title {
	width: 98%;
	height: 50px;
	margin: 10px auto;
	border-bottom: 1px solid gray;
	margin-bottom: 10px;
}

.title h4 {
	font-size: 18px;
	font-weight: 500;
	color: #000 !important;
	margin-top: 10px;
}
</style>
</head>

<body>
	<div id="app" class="app">
		<div class="title">
			<h4 style="float: left;">联系人纪念日</h4>
			<span style="float: right;"><el-button>
				<i class="el-icon-check"></i>保存</el-button></span>
		</div>
		<el-form :model="anniForm" :rules="rules" ref="anniForm"
			label-width="100px" class="demo"> 
			<el-form-item label="客户"prop="custname">
			 <el-input v-model="anniForm.custname"disabled></el-input> 
			</el-form-item>
			 <el-form-item>
			 
			 
			<el-autocomplete class="inline-input" v-model="anniForm.custname" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect">
												<template slot-scope="{ item }">
  														  <div class="name">{{ item.cus_name }}({{ item.cus_company}})</div>
												  </template>
												</el-autocomplete>
			
			
			</el-form-item>
		 <el-form-item label="联系人">
					<el-col :span="8">
						<el-form-item prop="linId">
							<el-select v-model="anniForm.linId" @select="handleSelect1">
			  <el-option  v-for="item in customertoman":key="item.linId":label="item.linName":value="item.linId">
			</el-select> 
						</el-form-item>
		</el-col>
		 <el-col :span="12" :offset="2"> 
		<el-form-item
			label="纪念日类型" prop="annity" required> <el-select
			placeholder="未选" v-model="anniForm.annity"> <el-option
			label="公司周年" :value="2111"></el-option> <el-option label="客户生日"
			:value="2112"></el-option> </el-select> </el-form-item> </el-col> </el-form-item>
			<el-form-item label="纪念日" prop="date1">
		<el-date-picker type="date" v-model="anniForm.date1"
			placeholder="选择日期" style="width: 40%;"></el-date-picker> </el-form-item> 
			<el-form-item label="备注" prop="remark"> <el-col :span="20">
		<el-input type="textarea" :rows="2" v-model="anniForm.remark"></el-input>
		</el-col> </el-form-item> <el-form-item label="提醒日期" prop="remind"> <el-col
			:span="20"> <el-input :disabled="true"
			v-model="anniForm.remind"></el-input> </el-col> </el-form-item> <el-form-item>
		<el-button size="small" type="primary">上传附件</el-button> <span
			style="color: gray;">可多选，每个小于10M</span> </el-form-item> </el-form>
		<div class="title">
			<span style="float: right;"><el-button
					@click="onSubmit('anniForm')">
				<i class="el-icon-check"></i>保存</el-button></span>
		</div>
	</div>

	<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						customertoman:[],
						anniForm: {
							custid:'',
							custname: '',
							linName: '',
							linId:'',
							annity: '',
							date1: '',
							remark: '',
							remind: '',
							id:'',
							restaurants: []
						},
						
						rules: {
							custname: [{
									required: true,
									message: '请输入客户',
									trigger: 'blur'
								},
							],
							linName: [{
								required: true,
								message: '请选择联系人',
								trigger: 'change'
							}],
							annity: [{
								required: true,
								message: '请选择纪念日类型',
								trigger: 'change'
							}],
							date1: [{
								required: true,
								message: '纪念日不能为空',
								trigger: 'change'
							}]
						}
					}
				},
				methods: {
					onSubmit(formName) {
					    	//验证方法
					        this.$refs[formName].validate((valid) => {
					          if (valid) {
					        	  var par = null;
									if (JSON.stringify(${anniversary}) === '{}') {
									    par = "/customer/subForm";
									    
									}else{
										 par = "/customer/editanniForm";
										 this.anniForm.id = ${anniversary.ann_id}+"";
									}
					        	  
					        	  //post提交数据
					           	axios.post(par,
					           			//参数转换
					           			Qs.stringify(this.anniForm,{arrayFormat: 'brackets'})
					           			//ajax请求成功的回调函数
					           			).then(function(v){

					           			window.parent.location.replace("/customer/anniversaryList");
					           			console.log("回调成功，获取了服务器端返回的值v");
					           	}).catch(function(e){
					           		alert("出错了"+e);
					           	});
					        	  
					        	  
					          } else {
					            console.log('error submit!!');
					            return false;
					          }
					        });
					},
					
<<<<<<< HEAD
=======
					dateFormat:function(time) {
					    var date=new Date(time);
					    var year=date.getFullYear();
					    /* 在日期格式中，月份是从0开始的，因此要加0
					     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
					     * */
					    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
					    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
					    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
					    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
					    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
					    // 拼接
					  //  return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
					    return year+"-"+month+"-"+day;
					},
					
>>>>>>> refs/remotes/origin/产品
					querySearch: function(queryString, cb) {
						 var allarr = this.anniForm.restaurants;
				    	var newsarr = [];
							allarr.forEach(v => {
								 var strs =v.cus_name+"";
								 if (strs.indexOf(queryString) >= 0) {
										newsarr.push(v);
										console.info(strs);
										console.info(v);
									} 
							})
							// 调用 callback 返回建议列表的数据
							cb(newsarr);
					},
					handleSelect: function(it) {
						console.log(it.cus_name);
						this.anniForm.custname=it.cus_name;
						this.anniForm.custid=it.cus_id;
						 var iosnn=this;
							//post提交数据
							axios.post("/onSale/findByCoustomerName",
								//参数转换
								Qs.stringify({'custid':this.anniForm.custid}, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								console.info(v.data.custo);
								iosnn.customertoman = v.data.custo;
							}).catch(function(e) {
								alert("出错了"+e);
							});
								
					},
					handleSelect1: function(it) {
						this.anniForm.linId=it.lin_id;
													
					}
					      },
					      mounted() {
					    	 // var dic=${dictionaryitem};
					    	  var mas=${mansitem};	
					    	  this.anniForm.restaurants = mas;
					    	  
								var an = ${anniversary};
								console.log(an);
								
								if(an){
								this.anniForm.custname = an.cus_name;
								this.anniForm.linName = an.lin_name;
								this.anniForm.linId = an.lin_id;
								this.anniForm.custid = an.cus_id;
								this.anniForm.annity = an.ann;
								this.anniForm.date1 = an.ann_date;
								this.anniForm.remark = an.ann_remark;
					      }
								
						console.log(mas);

				}
			})
		</script>
</body>

</html>